// 整车转料组件,注意要用反引号
Vue.component('split-tran-dialog', {
    template: `
       <el-dialog title="分车转料" :visible.sync="splitDialog.show" width="95%" center v-loading="splitDialog.loading"
                   :close-on-click-modal="0" :show-close="0" custom-class="whole-tran-dialog">
            <el-form label-position="right" label-width="140px" :inline="true" :model="tranForm"
                     :rules="tranRules" ref="tranForm">
                <invoice-select @change="operateInvChange"></invoice-select>
                <el-divider content-position="center">分车转料是将旧车的生产方量转入到新车,请在下方输入旧车的剩下的发货方量以及新车转料后的发货方量</el-divider>
                <el-form-item label="退料类型" required prop="backType">
                    <el-select v-model="tranForm.backType" filterable clearable placeholder="退料类型"
                               value-key="id">
                        <el-option v-for="item in backTypeList"
                                   :key="item.code"
                                   :label="item.desc"
                                   :value="item.code + ''">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="转料方量" prop="tranStere"  required>
                    <el-input v-model="tranForm.tranStere" type="number"></el-input>
                </el-form-item>
                <el-form-item label="新车生产时间" required prop="proTime" class="split-tran-pro-time">
                    <el-date-picker v-model="tranForm.proTime" value-format="yyyy-MM-dd HH:mm:ss" 
                                    type="datetime" placeholder="生产时间">
                    </el-date-picker>
                </el-form-item>
                <br>
                <el-form-item  label="原车发货方量" required>
                    <el-input v-model="tranForm.sourceSendStere" type="number"></el-input>
                </el-form-item>
                <el-form-item  label="新车发货方量" required>
                    <el-input v-model="tranForm.targetSendStere" type="number"></el-input>
                </el-form-item>
                <el-form-item label="原发货单是否作废" required prop="isAdd" label-width="auto">
                    <el-radio-group v-model="tranForm.isAdd">
                        <el-radio label="0">不作废</el-radio>
                        <el-radio label="1">作废</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="转料备注" required class="invoice-remark">
                    <el-input type="textarea" :rows="2" v-model="tranForm.tranRemark"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onTranSubmit('tranForm')">确定</el-button>
                <el-button @click="cancel('splitDialog')">取 消</el-button>
            </div>
        </el-dialog>
      `,
    props: {
        sourceInvoice: {
            type: Object,
            //  当参数是对象时,需要默认数据
            default: function () {
                let inv = {
                    id: null,
                    code: "",
                };
                return inv;
            }
        },
    },
    data() {
        return {
            //  任务单搜索框
            dialogSearch: {
                conName: null,
                site: null,
                loading: null,
            },
            //  退料类型
            backTypeList: [{
                code: 0,
                desc: "站内退回"
            }, {
                code: 1,
                desc: "站外退回"
            }],
            //  转料操作-弹窗
            splitDialog: {
                show: true,
                loading: false,
            },
            //  转料操作-表单数据
            tranForm: {
                sourceInvId: null,
                targetInvId: null,
                tranStere: null,
                targetSendStere: null,
                tranRemark: null,
                sourceSendStere: null,
                proTime: null,
            },
            //  转料验证操作
            tranRules: {
                tranStere: [
                    {required: true, message: '请选择转料方量', trigger: 'blur'},
                ],
                tranRemark: [
                    {required: true, message: '请输入转料原因', trigger: 'blur'},
                ],
            },
        };
    },
    created() {
        let that = this;
        that.tranForm.sourceInvId = that.sourceInvoice.id;
    },
    methods: {
        //  整车转料提交
        onTranSubmit(formName) {
            let that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    //  验证成功
                    that.splitDialog.loading = true;
                    $.ajax({
                        type: "PUT",
                        url: "/pro/invoice/tran/split/own/" + that.tranForm.sourceInvId,
                        async: true,
                        dataType: 'json',
                        data: that.tranForm,
                        success: function (res) {
                            if (res.code == 0) {
                                that.$message({
                                    showClose: true,
                                    message: '操作成功',
                                    type: 'success'
                                });
                                //  回调
                                that.cancel();
                            } else {
                                that.$message({
                                    showClose: true,
                                    message: '保存失败：' + res.msg,
                                    type: 'error'
                                });
                            }
                        },
                        error: function (res) {
                            that.$message({
                                showClose: true,
                                message: '请求失败，请联系管理员',
                                type: 'error'
                            });
                            return;
                        },
                        complete: function (XMLHttpRequest, status) {
                            that.splitDialog.loading = false;
                        }
                    })
                } else {
                    that.$message({
                        showClose: true,
                        message: '验证表单失败.',
                        type: 'error'
                    });
                    return false;
                }
            });
        },
        operateInvChange(inv) {
            let that = this;
            that.tranForm.targetInvId = inv.id;
            that.tranForm.proTime = inv.proTime;
        },
        //  取消添加
        cancel() {
            let that = this;
            Object.keys(that.tranForm).forEach(key => {
                that.tranForm[key] = null;
            });
            //  调用父级的关闭弹窗
            this.$emit("closed")
        },
    }
});

// 创建 Vue 实例
new Vue({
    el: '#app',
    data() {
        return {};
    }
});

